<template>
    <div id="leftMenu">
        <el-row class="tac">
            <el-col >
                <h4 class="mb-2">个人中心</h4>
                <el-menu :default-active="activeMenu" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
                    <el-menu-item index="2" @click="router.push('/user/userInfo')">
                        <el-icon>
                            <User />
                        </el-icon>
                        <span>基本信息</span>
                    </el-menu-item>
                     <el-menu-item index="3" @click="router.push('/user/myMember')">
                        <el-icon>
                            <Goods />
                        </el-icon>
                        <span>我的会员</span>
                    </el-menu-item>
                    <el-menu-item index="4" @click="router.push('/user/myOrder')">
                        <el-icon>
                            <Goods />
                        </el-icon>
                        <span>我的订单</span>
                    </el-menu-item>
                    <el-menu-item index="5" @click="router.push('/user/myAppointed')">
                        <el-icon>
                            <Goods />
                        </el-icon>
                        <span>我的预约</span>
                    </el-menu-item>
                    <el-menu-item index="6" @click="router.push('/user/myIntegral')">
                        <el-icon>
                            <Coin />
                        </el-icon>
                        <span>积分余额</span>
                    </el-menu-item>
                    <el-menu-item index="7" @click="router.push('/user/myCoupon')">
                        <el-icon>
                            <Coin />
                        </el-icon>
                        <span>券包</span>
                    </el-menu-item>
                </el-menu>
            </el-col>
        </el-row>
    </div>
</template>
<script lang="ts" setup>
import {
    User,
    Goods,
    Coin,
    Document,
    Menu as IconMenu,
    Location,
    Setting,
} from '@element-plus/icons-vue'
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import router from '../../router';
const route = useRoute();
// 添加计算属性来处理活动菜单
const activeMenu = computed(() => {
  const pathMap: Record<string, string> = {
    '/user/userInfo': '2',
    '/user/myMember': '3',
    '/user/myOrder': '4',
    '/user/myAppointed': '5',
    '/user/myIntegral': '6',
    '/user/myCoupon': '7'
  }
  return pathMap[route.path]
})
const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
</script>
<style scoped>
#leftMenu{
   margin-top: 50px;
    height: calc(100vh - 50px);
    width: 200px; /* 设置固定宽度 */
    flex-shrink: 0; /* 防止被压缩 */
}
.tac{
    display: flex;
    height: 100%;
    /* background-color: aqua; */
}
.tac .el-menu-vertical-demo{
    height: 100%;
    width: 200px;
    border-right: none; /* 如果需要移除右边框 */
}
/* 移除 el-col 的默认宽度限制 */
:deep(.el-col) {
    width: 200px !important;
}
</style>